<template>
  <HomePanel ref="target" title="人气推荐" subTitle="人气爆款 不容错过">
    <template #right>
      <XtxMore/>
    </template>
    <!-- <ul  class="goods-list">
      <li v-for="item in hotList" :key="item.id">
        <RouterLink to="/">
          <img :src="item.picture" alt="">
          <p class="name">{{item.title}}</p>
          <p class="desc">{{item.alt}}</p>
        </RouterLink>
      </li>
    </ul> -->
    <GoodsList :list="hotList" :isNew="false"/>
  </HomePanel>
</template>
<script>
import HomePanel from './home-panel.vue'
import { findHot } from '@/api/home'
import { ref } from 'vue'
import GoodsList from './goods-list.vue'
import { useObserver } from '@/hook'
export default {
  name: 'HomeHot',
  components: {
    HomePanel,
    GoodsList
  },
  setup () {
    // 人气好物数据列表
    const hotList = ref([])
    // 获取人气好物数据列表方法
    const getHotList = async () => {
      const res = await findHot()
      hotList.value = res.result
    }
    // 在onMounted钩子中调用
    // onMounted(() => {
    //   getHotList()
    // })
    const { target } = useObserver(getHotList)
    return { hotList, target }
  }

}
</script>
<style scoped lang='less'>
// .goods-list {
//   display: flex;
//   justify-content: space-between;
//   height: 426px;
//   li {
//     width: 306px;
//     height: 406px;
//     img {
//       width: 306px;
//       height: 306px;
//     }
//     p {
//       font-size: 22px;
//       padding-top: 12px;
//       text-align: center;
//     }
//     .desc {
//       color: #999;
//       font-size: 18px;
//     }
//   }
// }
</style>
